/* stylelint-disable custom-property-pattern */
// 全局SCSS变量

$menuBg: var(--menuBg);
// $menuBg:red;
$menuText: var(--menuText);
$menuActiveText: var(--menuActiveText);
$menuHover: var(--menuHover);

$sideBarExpandWidth: var(--sideBarExpandWidth);
$sideBarColappseWidth: var(--sideBarColappseWidth);


$layoutHeadHeight:var(--layoutHeadHeight);
$layoutTagHeight:var(--layoutTagHeight);


// $subMenuBg: var(--subMenuBg);
// $subMenuActiveText: var(--subMenuActiveText);
// $subMenuHover: var(--subMenuHover);

$testA:var(--testA);

$globalTest: pink;


//自居中
@mixin self_center($pos:absolute){
    position: $pos;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
%self_center{
    @include self_center();
}

//自填满
@mixin self_fill($pos:absolute){
    position: $pos;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
%self_fill{
    @include self_fill();
}

//flex justiy center and align-items center
@mixin flex_cc{
    display: flex;
    justify-content: center;
    align-items: center;
}
%flex_cc{
    @include flex_cc();
}

@mixin flex_between_center{
    display: flex;
    justify-content: space-between;
    align-items: center;
}



@mixin square_corner_border{
    .t_line_box {
        position: absolute;
        width: 100%;
        height: 100%;
        i {
            background-color: #6095f1;
            box-shadow: 0px 0px 10px #6095f1;
            position: absolute;
        }
        .t_l_line {
            height: 5px;
            width: 26px;
            left: -3px;
            top: -3px;
        }
        .l_t_line {
            width: 5px;
            height: 24px;
            left: -3px;
            top: -3px;
        }
        .t_r_line {
            height: 5px;
            width: 26px;
            right: -3px;
            top: -3px;
        }
        .r_t_line {
            width: 5px;
            height: 24px;
            right: -3px;
            top: -3px;
        }
        .l_b_line {
            width: 5px;
            height: 24px;
            left: -3px;
            bottom: -3px;
        }
        .b_l_line {
            height: 5px;
            width: 26px;
            left: -3px;
            bottom: -3px;
        }
        .r_b_line {
            width: 5px;
            height: 24px;
            right: -3px;
            bottom: -3px;
        }
        .b_r_line {
            height: 5px;
            width: 26px;
            right: -3px;
            bottom: -3px;
        }
    }
}